<template>
  <div class="het-panel">
    <HETTable ref="hetTable" :config="tableConfig"></HETTable>
  </div>
  <el-dialog v-model="dialog.visible" width="600px" :title="isEdit ? '编辑扫描任务' : '新建扫描任务'" @close="resetForm">
    <HETForm1 ref="formRef" v-model="formData" :formConfig="formConfig"></HETForm1>
    <template #footer>
      <el-button @click="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click="submit(formRef)">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
import moment from 'moment'

const dialog = reactive({
  visible: false
})
const isEdit = ref(false)
const hetTable = ref()
const tableConfig = ref({
  module: '',
  selectApi: params =>
    mAxios.get('vuln/scan/task/list', {
      params
    }),
  deleteApi: params => mAxios.delete('vuln/scan/task', { data: params }),
  search: {
    form: {},
    config: [
      {
        label: '',
        prop: 'timeRange',
        type: 'date-picker',
        setting: {
          type: 'datetimerange',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间'
        }
      },
      {
        label: '',
        prop: 'taskName',
        type: 'input',
        setting: { placeholder: '任务名称' }
      }
      // {
      //   label: "扫描状态",
      //   prop: "status",
      //   type: "select",
      //   style: { width: "280px" },
      //   options: [
      //     { label: "扫描中", value: "扫描中" },
      //     { label: "扫描完成", value: "扫描完成" },
      //   ],
      // },
    ]
  },
  columns: [
    { type: 'selection', width: 34 },
    {
      label: '任务名',
      prop: 'taskName'
    },
    {
      label: '描述',
      prop: 'description'
    },
    {
      label: '执行方式',
      prop: 'excuteWay',
      formatter: row => {
        let week = ''
        switch (row.dayOfWeek) {
          case 'MONDAY':
            week = '周一'
            break
          case 'TUESDAY':
            week = '周二'
            break
          case 'WEDNESDAY':
            week = '周三'
            break
          case 'THURSDAY':
            week = '周四'
            break
          case 'FRIDAY':
            week = '周五'
            break
          case 'SATURDAY':
            week = '周六'
            break
          case 'SUNDAY':
            week = '周日'
            break
        }
        return row.excuteWay + week + (row.excuteTime ? moment(row.excuteTime).format('HH:mm:ss') : '') + '执行'
      }
    },
    {
      label: '优先级',
      prop: 'priority'
    },
    {
      label: '任务创建时间',
      prop: 'createdTime'
    },
    {
      label: '操作',
      custom: {
        type: 'button',
        operatBtns: [
          {
            name: '开始',
            handleClick: row => {
              ElMessageBox.confirm('确定要开始扫描任务？', '漏洞扫描', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center: true,
                closeOnClickModal: false,
                type: 'warning'
              }).then(() => {
                mAxios.put('vuln/scan/start/' + row.id).then(res => {
                  res.data.succeed ? ElMessage.success('开始扫描') : ElMessage.error('扫描失败')
                })
              })
            }
          },
          {
            name: '编辑',
            handleClick: row => {
              formData.value = { ...row }
              isEdit.value = true
              dialog.visible = true
            }
          },
          {
            name: '删除',
            type: 'delete'
          }
        ]
      }
    }
  ],
  controlBtns: [
    {
      name: '新建',
      icon: 'Plus',
      type: 'primary',
      handleClick: () => {
        isEdit.value = false
        dialog.visible = true
      }
    },
    {
      name: '批量删除',
      icon: 'Delete',
      type: 'delete',
      disabled: data => {
        return data.length == 0
      }
    }
  ]
})
const formRef = ref()
const formData = ref({ priority: '默认', excuteWay: '单次' })
const formConfig = [
  {
    label: '任务名称',
    prop: 'taskName',
    type: 'input',
    required: true,
    setting: { placeholder: '请输入任务名称' }
  },
  {
    label: '描述',
    prop: 'description',
    type: 'input',
    setting: { type: 'textarea' }
  },

  {
    label: '任务优先级',
    prop: 'priority',
    type: 'select',
    setting: {},
    options: [
      { label: '默认', value: '默认' },
      { label: '高', value: '高' },
      { label: '中', value: '中' },
      { label: '低', value: '低' }
    ]
  },
  {
    label: '执行方式',
    prop: 'excuteWay',
    type: 'select',
    options: [
      { label: '单次', value: '单次' },
      { label: '每天', value: '每天' },
      { label: '每周', value: '每周' }
    ]
  },
  {
    label: '每周几执行',
    prop: 'dayOfWeek',
    type: 'select',
    required: true,
    hidden: form => !(form.excuteWay == '每周'),
    options: [
      { label: '周一', value: 'MONDAY' },
      { label: '周二', value: 'TUESDAY' },
      { label: '周三', value: 'WEDNESDAY' },
      { label: '周四', value: 'THURSDAY' },
      { label: '周五', value: 'FRIDAY' },
      { label: '周六', value: 'SATURDAY' },
      { label: '周日', value: 'SUNDAY' }
    ]
  },
  {
    label: '执行时间',
    prop: 'excuteTime',
    type: 'time-picker',
    required: true,
    hidden: form => form.excuteWay == '单次'
  }
]
const resetForm = () => {
  formData.value = { priority: '默认', excuteWay: '单次' }
}
const submit = formEl => {
  formEl.validate(valid => {
    if (valid) {
      const params = {
        ...formData.value
        // excuteTime: moment(formData.value.excuteTime).format('HH:mm:ss')
      }
      let req
      if (isEdit.value) {
        req = mAxios.put('vuln/scan/task', params)
      } else {
        req = mAxios.post('vuln/scan/task/add', params)
      }
      req.then(res => {
        res.data.succeed ? ElMessage.success('操作成功') : ElMessage.error('操作失败')
        dialog.visible = false
        hetTable.value.getTableData()
      })
    }
  })
}
</script>
